<template>
  <view class="blog-body-background">
    <view class="blog-body-header">
      <slot name="header">
        <blog-navigation-bar @onHeaderClick="_onBack" v-if="enableHeader">
          <image src="../../static/go-back.png" style="width: 16px;height: 16px;"/>
          <text>{{ title }}</text>
        </blog-navigation-bar>
      </slot>
    </view>
    <view class="blog-body-main"
          :style="{backgroundColor:backgroundColor?backgroundColor:'none',padding:padding?`${padding}px`:0}">
      <slot></slot>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    padding: {
      type: Number
    },
    title: {
      type: String,
      default: "返回上一级"
    },
    enableHeader: {
      type: Boolean,
      default: true
    },
    delta: {
      type: Number,
      default: 1
    },
    address: {
      type: String,
      default: "/pages/home/home"
    },
    backgroundColor: {
      type: String,
    }
  },
  methods: {
    _onBack() {
      uni.navigateBack({
        delta: this.delta,
        fail: () => {
          uni.redirectTo({url: this.address})
        }
      })
    }
  }
}
</script>

<style>

.blog-body-background {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.blog-body-header {
  box-sizing: border-box;
}

.blog-body-main {
  position: relative;
  box-sizing: border-box;
  flex-grow: 1;
  overflow: scroll;
}

</style>
